<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bilibili-pay</title>

    <style>
        @font-face {
            font-family: 'Itim';
            src: url("./assets/Itim-Regular.ttf");
            font-weight: normal;
            font-style: normal;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Itim';
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #bilibili-pay-page {
            width: 720px;
            height: 635px;
            border: 1px solid #efefef;
        }

        .header-block {
            width: 100%;
            height: 88px;
            padding: 22px 30px;
            display: flex;
            justify-content: space-between;
            background-image: url("./assets/header-bg.webp");
            background-size: cover;
            background-position: center center;
        }

        .user-info {
            width: 243px;
            height: 48px;
            display: flex;
            gap: 12px;
        }

        .avatar {
            border-radius: 50%;
            border: 2px solid #ffffff;
        }

        .username {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .time-mess {
            font-size: 14px;
            line-height: 21px;
            color: #ffffff;
            opacity: 0.6;
        }

        .text-link {
            width: 140px;
            height: 48px;
            display: flex;
            align-items: end;
        }

        .text {
            cursor: pointer;
            line-height: 24px;
            font-size: 14px;
            color: #FFFDFD;
            letter-spacing: 0.5px;
        }

        .tab-block {
            width: 100%;
            height: 68px;
            display: flex;
        }

        .left-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .right-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #f4f5f7;
        }

        .left-item .title {
            font-size: 16px;
            line-height: 24px;
            color: #00A1D6;
            letter-spacing: 0.5px;
        }

        .left-item .content {
            font-size: 12px;
            line-height: 18px;
            color: #6D757A;
        }

        .right-item .title {
            font-size: 16px;
            line-height: 24px;
            color: #000000;
            opacity: 0.7;
        }

        .right-item .content {
            font-size: 12px;
            line-height: 18px;
            color: #6D757A;
        }

        .pay-list-block {
            width: 100%;
            height: 135px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .pay-item {
            width: 98px;
            height: 102px;
            border-radius: 4px;
            border: 2px solid rgba(109, 117, 122, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 16px 0;
            gap: 8px;
            position: relative;
        }

        .pay-tag {
            width: 43px;
            height: 22px;
            background-color: #F25D8E;
            position: absolute;
            top: -10px;
            right: 2px;
            border-radius: 50px;
            color: #ffffff;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
            border: 2px solid #ffffff;
        }

        .pay-item .title {
            font-size: 14px;
            line-height: 18px;
            color: #000000;
            opacity: 0.7;
            letter-spacing: 0.5px;
        }

        .pay-item .money {
            font-size: 24px;
            line-height: 18px;
            letter-spacing: 0.5px;
            color: #00A1D6;
            font-weight: 700;
        }

        .pay-item .o-money {
            font-size: 14px;
            line-height: 18px;
            color: #6D757A;
            text-decoration: line-through;
        }

        .description-text {
            font-size: 12px;
            line-height: 18px;
            color: #6D757A;
            padding: 0 40px;
            letter-spacing: 0.5px;
        }

        .select-block {
            width: 100%;
            padding: 0 40px;
            margin-top: 8px;
            letter-spacing: 0.5px;
            display: flex;
        }

        .select-text {
            width: 100px;
            color: #6D757A;
            font-size: 12px;
            line-height: 18px;
        }

        .select-input {
            width: 100%;
            background-color: #F5F7FA;
            border: 1px solid #E4E7ED;
            border-radius: 4px;
        }

        .select-item {
            color: rgba(109, 117, 122, 0.6);
            font-size: 12px;
            line-height: 18px;
        }

        .select-input:invalid {
            color: rgba(109, 117, 122, 0.6); /* 使用你代码中 select-item 的颜色作为占位符颜色 */
        }

        .pay-block {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 32px;
        }

        .pay-card {
            width: 90%;
            height: 202px;
            border: 2px solid rgba(109, 117, 122, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .checkbox {
            margin-top: 8px;
            width: 90%;
            height: 30px;
        }
        .pay-ma {
            width: 120px;
            height: 120px;
            background-color: rgba(109, 117, 122, 0.5);
        }
        .pay-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .text-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }
        .pay-fei {
            font-weight: bold;
            color: #00A1D6;
            font-size: 28px;
        }
        .text-pay {
            font-size: 12px;
            line-height: 18px;
            color: rgba(109, 117, 122, 1);
        }
        .pay-container .title {
            font-size: 14px;
            line-height: 18px;
            color: rgba(0,0,0,0.7);
        }
        .checkbox {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .checkbox .accept {
            font-size: 10px;
            line-height: 18px;
            color: rgba(109, 117, 122, 1);
        }
    </style>
</head>
<body>
<div id="bilibili-pay-page">
    <!--    顶部栏-->
    <div class="header-block">
        <!--        用户头像卡片-->
        <div class="user-info">
            <div class="user-avatar">
                <img src="./assets/avatar.jpg" class="avatar" alt="avatar" srcset="" width="46" height="46">
            </div>
            <div class="user-mess">
                <div class="username">高桥凉介</div>
                <div class="time-mess">大会员：有效期至2023-12-19</div>
            </div>
        </div>

        <!--        右侧文字链接-->
        <div class="text-link">
            <div class="text">积分兑换|激活码开通</div>
        </div>
    </div>

    <!--    tab-->
    <div class="tab-block">
        <div class="left-item">
            <div class="title">大会员套餐</div>
            <div class="content">电脑/手机/ipad可用</div>
        </div>
        <div class="right-item">
            <div class="title">超级大会员套餐</div>
            <div class="content">TV/电脑/手机/ipad可用</div>
        </div>
    </div>

    <!--    pay-list-->
    <div class="pay-list-block">
        <div class="pay-item">
            <div class="pay-tag">7.2折</div>
            <div class="title">连续包年</div>
            <div class="money">￥148</div>
            <div class="o-money">￥233</div>
        </div>
        <div class="pay-item">
            <div class="pay-tag">7.2折</div>
            <div class="title">连续包季</div>
            <div class="money">￥45</div>
            <div class="o-money">￥68</div>
        </div>
        <div class="pay-item">
            <div class="pay-tag">7.2折</div>
            <div class="title">连续包月</div>
            <div class="money">￥15</div>
            <div class="o-money">￥25</div>
        </div>
        <div class="pay-item">
            <div class="pay-tag">7.2折</div>
            <div class="title">年度大会员</div>
            <div class="money">￥168</div>
            <div class="o-money">￥233</div>
        </div>
        <div class="pay-item">
            <div class="title">季度大会员</div>
            <div class="money">￥68</div>
            <div class="o-money" style="opacity: 0">￥233</div>
        </div>
        <div class="pay-item">
            <div class="title">月度大会员</div>
            <div class="money">￥25</div>
            <div class="o-money" style="opacity: 0">￥233</div>
        </div>
    </div>
    <div class="description-text">每年按148元续费，可随时取消</div>
    <!--    选择代金卷-->
    <div class="select-block">
        <label for="pet-select" class="select-text">选择代金眷：</label>

        <select name="pets" id="pet-select" class="select-input">
            <option class="select-item" value="">请选择代金眷</option>
            <option class="select-item" value="100">100</option>
            <option class="select-item" value="12">12</option>
            <option class="select-item" value="10">10</option>
        </select>
    </div>

    <!--    支付-->
    <div class="pay-block">

        <div class="pay-card">
            <div class="pay-container">
                <div class="title">扫码支付</div>
                <div class="pay-ma"></div>
            </div>
            <div class="text-container">
                <div class="pay-fei">￥148</div>
                <div class="text-pay">请先同意协议</div>
            </div>
        </div>

        <div class="checkbox">
            <input type="checkbox" id="accept" name="accept" checked/>
            <label class="accept" for="accept">同意《大会员服务协议》 《大会员自动续费服务协议》</label>
        </div>
    </div>
</div>
</body>
</html>